<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <li class="mui-table-view-cell" v-for="item in list" :key="item.id">
                {{ item.title }} <span>{{ item.createTimeStr }}</span>
            </li>
        </van-list>
    </div>
</template>


<script>
    import home from '@/api/tap-water/home';
    import Vue from 'vue'
    import {List} from 'vant';

    Vue.use(List);

    export default {
        id: "",
        name: "water-fix-table",
        data() {
            return {
                list: [],
                limit: 10,
                page: 1,
                pageAll: 0,
                loading: false,
                finished: false,
                noData: false, // 如果没有数据，显示暂无数据
            };
        },
        methods: {
            getWaterInfoList(page, limit, tag, region) {
                home.getWaterInfoList(page, limit, tag, region)
                    .then(response => {
                        this.page++;
                        this.pageAll = Math.ceil(response.data.count / this.limit);
                        this.list = this.list.concat(response.data.data);

                        // 如果没有数据，显示暂无数据
                        if (this.list.length === 0 && this.page === 1) {
                            this.finished = true
                        }
                        // 如果加载完毕，显示没有更多了
                        if (response.data.data.length === 0) {
                            this.finished = true
                        }

                        // 加载状态结束
                        this.loading = false;

                        // 数据全部加载完成
                        if (this.page > this.pageAll) {
                            this.finished = true;
                        }
                    });
            },
            onLoad: function () {
                this.list = [];
                this.page = 1;
                this.getWaterInfoList(this.page, this.limit, this.tag, this.region);
            },
        },
        watch: {
            name() {
                this.list = [];
                this.page = 1;
                this.getWaterInfoList(this.page, this.limit, this.tag, this.region);
            },
            tag() {
                this.list = [];
                this.page = 1;
                this.limit = 10;
                this.getWaterInfoList(this.page, this.limit, this.tag, this.region);
            },

        },
        props: ['region', 'tag']
    }
</script>

<style scoped>
</style>